<template>
	<view class="filter-menu" @click="rsolveBtn('close')">
		<view class="filter-menu-box" :animation="animationData" @click.stop="" :style="{padding:`${menuHeight}px 0 ${bottomSaftHeight}px`}">
			<view class="menu-box-top">
				<view class="box-top-options filter-menu-class">
					<view class="menu-title">风格</view>
					<view class="menu-class-list">
						<view class="class-list-item" v-for="item,index in classList" :key="item.id"
							:class="chooseStyleId.includes(item.id)?'active-item':''" @click="chooseStyleId.push(item.id)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="box-top-options filter-menu-price">
					<view class="menu-title">价格区间（元）</view>
					<view class="menu-price-input">
						<input type="number" v-model="priceSpace[0]" />
						<text>_</text>
						<input type="number" v-model="priceSpace[1]" />
					</view>
				</view>
				<view class="box-top-options filter-menu-class" v-if="!hideBrand">
					<view class="menu-title">品牌</view>
					<view class="menu-class-list">
						<view class="class-list-item" v-for="item,index in brandList" :key="item.id"
							:class="chooseBrandId == item.id ?'active-item':''" @click="chooseBrandId = item.id">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="box-top-options filter-menu-class" v-if="goodsCateList.length">
					<view class="menu-title">产品类型</view>
					<view class="menu-class-list">
						<view class="class-list-item" v-for="item,index in goodsCateList" :key="item.id"
							:class="chooseCateId == item.id?'active-item':''" @click="chooseCateId = item.id">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			<view class="menu-box-btn">
				<view class="box-btn-reset" @click="rsolveBtn(0)">重置</view>
				<view class="box-btn-config" @click="rsolveBtn(1)">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "filterMenu",
		data() {
			/**
			 *@classList 产品类型列表
			 * @priceSpace 价格区间
			 * @chooseStyleId 产品类型选择项
			 * @animationData 动画对象
			 * @menuHeight 功能按钮高度
			 */
			return {
				bottomSaftHeight: getApp().globalData.bottomSaftHeight,
				classList: [],
				brandList:[],
				goodsCateList:[],
				priceSpace: ['', ''],
				animationData: {},
				menuHeight:0,
				chooseStyleId:[],
				chooseBrandId:'',
				chooseCateId:''
			};
		},
		props: {
			value: {
				type: Boolean,
				default: false
			},
			filterConfig:{
				type:Object,
				default:() => {
					return {chooseStyleId:[],priceSpace:['','']}
				}
			},
			hideBrand:{
				type:Boolean,
				default:false
			}
		},
		mounted() {
			this.init()
			this.openAni(0)
			this.chooseStyleId = [...this.$props.filterConfig.chooseStyleId]
			this.priceSpace = [...this.$props.filterConfig.priceSpace]
			this.chooseBrandId = this.$props.filterConfig.chooseBrandId
			this.chooseCateId = this.$props.filterConfig.chooseCateId
		},
		methods: {
			init() {
				// uni.showLoading({
				// 	mask:true,
				// 	title:'数据加载中'
				// })
				this.$com.getStatusBarHeight((res)=>{
					this.menuHeight = res.content_top;
				});
				this.getClass()
				if(!this.$props.hideBrand){
					this.getBrandList()
				}
				this.getCateList()
			},
			openAni(type) {
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})

				this.animation = animation

				animation.translateX(type ? '100%' : '0%').step()

				this.animationData = animation.export()
			},
			getBrandList(){
				this.$appData.brand.getBrandList({},(res)=>{
					let brnads = []
					res.data.list.forEach((item)=>{
						brnads.push(...item.children)
					})
					this.brandList = brnads
				})
			},
			getCateList(){
				this.$appData.goods.getCateList({},(res)=>{
					let cateList = []
					res.data.list.forEach((item)=>{
						cateList.push(...item.children)
					})
					this.goodsCateList = cateList
				})
			},
			getClass() {
				// this.classList = new Array(21).fill({
				// 	name: '沙发',
				// 	value: '1'
				// })
				this.$appData.goods.getAttrList({},(res)=>{
					console.log(res);
					this.classList = res.data.list
				})
			},
			rsolveBtn(type) {
				let chooseStyleId = this.chooseStyleId
				let chooseBrandId = this.chooseBrandId
				let chooseCateId = this.chooseCateId
				let priceSpace = this.priceSpace
				let haveNum = priceSpace[0]*1 > 0 && priceSpace[1]*1 > 0
				let errorNum = priceSpace[0]*1 < 0 || priceSpace[1]*1 < 0
				let validataNum = priceSpace[0]*1 > priceSpace[1]*1
				// console.log(haveNum,errorNum,validataNum);
				if(errorNum || (haveNum && validataNum)){
					uni.showToast({
						title:'请检查价格区间',
						icon:"none"
					})
					return
				}
				if (!type) {
					chooseStyleId = []
					priceSpace = []
					chooseBrandId = ''
					chooseCateId = ''
				}
				this.openAni(1)
				setTimeout(() => {
					this.$emit("change", {
						chooseStyleId,
						priceSpace,
						chooseBrandId,
						chooseCateId,
						type,
						status: false
					})

				}, 500)
			}
		}
	}
</script>

<style lang="scss">
	$basePadding: 40rpx;

	.filter-menu {
		position: fixed;
		top: 0%;
		left: 0%;
		background-color: rgba(0, 0, 0, .3);
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		z-index: 99;
	}

	//弹窗内容区域
	.filter-menu-box {
		position: fixed;
		top: 0%;
		right: 0%;
		background-color: rgba(0, 0, 0, .3);
		width: 80%;
		height: 100%;
		z-index: 10;
		background-color: white;
		box-sizing: border-box;
		transform: translateX(100%);
	}

	.menu-box-top {
		height: calc(100% - 120rpx);
		padding-bottom: 40rpx;
		box-sizing: border-box;
		overflow-y: auto;
	}
	.menu-box-top .box-top-options {padding: 0 30rpx;}

	.menu-title {
		font-weight: bold;
		font-size: 30rpx;
		padding: 50rpx 0 30rpx;
	}

	// 品类
	.menu-class-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx 40rpx;

		.class-list-item {
			padding: 10rpx 0;
			border: 1px solid black;
			border-radius: 40rpx;
			text-align: center;
		}

		.active-item {
			background-color: black;
			color: white;
		}
	}

	// 价格
	.filter-menu-price {
		.menu-price-input {
			display: flex;
			margin-top: $basePadding;

			input {
				width: 32%;
				padding: 4rpx 0;
				border: 1px solid black;
				border-radius: 40rpx;
				text-align: center;
			}

			text {
				padding: 0 20rpx;
				font-weight: bold;
			}
		}
	}

	// 底部按钮
	.menu-box-btn {
		height: 70rpx;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;

		view {
			width: 49%;
			height: 100%;
			line-height: 70rpx;
			text-align: center;
			background-color: black;
			color: white;
			border-radius: 40rpx;
		}

		.box-btn-reset {
			color: #000;
			background-color: #f5f5f5;
		}
	}
</style>